<template>

  <el-dialog :title="form.id ? '编辑方向' : '新增方向'" style="width: 324px;" modal-class="dialog-add" v-model="dialogVisible"
    @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
    <!--form表单-->
    <el-form size="small" ref="form" label-width="80px" :model="form" :rules="formRules">
      <el-form-item label="所属职业" prop="career_id">
        <el-select v-model="form.career_id" :disabled="form.id ? true : false" @change="getLevelAll" style="width: 200px;">
          <el-option v-for="item in careeList" :value="item.id" :key="item.id" :label="item.title"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属级别" prop="level_id">
        <el-select :disabled="form.id ? true : false" v-model="form.level_id" style="width: 200px;">
          <el-option v-for="item in levelList" :value="item.id" :key="item.id" :label="item.title"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="title">
        <el-input style="width: 200px;" maxlength="30" v-model="form.title" placeholder="请输入"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="onSubmit" :loading="loading">保存</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import PositionApi from '@/api/position.js';
export default {
  data() {
    return {
      /*左边长度*/
      formLabelWidth: '140px',
      /*是否显示*/
      loading: false,
      /*是否显示*/
      dialogVisible: true,
      /*form表单对象*/
      form: {
        title: '',
        career_id: '',
        level_id: '',
        id: ''
      },
      careeList: [],
      levelList: [],
      /*form验证*/
      formRules: {
        title: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          }
        ],
        career_id: {
          required: true,
          message: '请选择所属职业',
          trigger: 'blur'
        },
        level_id: {
          required: true,
          message: '请选择所属级别',
          trigger: 'blur'
        },
      }
    };
  },
  props: ['title'],
  watch: {
    title: function () {
      this.$nextTick(() => {
        this.form.title = this.title;
      })
    },
  },
  created() {
    this.getData()
    this.getLevelAll()
  },
  methods: {
    setTitle({ title, id, level_id, career_id }) {
      this.form.title = title;
      this.form.id = id;
      this.form.level_id = level_id;
      this.form.career_id = career_id;
    },
    /*获取数据*/
    getData() {
      let self = this;
      PositionApi.getCareerList({}).then(res => {
        self.careeList = res.data;
      }).catch(error => {
      });
    },
    getLevelAll(value = '') {
      let self = this;
      self.levelList = []
      self.form.level_id = ''
      PositionApi.getCareerLevel({
        career_id: value
      }).then(res => {
        self.levelList = res.data;
      }).catch(error => {
      });
    },
    /*添加*/
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {

          let self = this;
          self.loading = true;
          let params = self.form;
          let key = 'careerDirectionStore'
          let msg = '新增成功'
          if (self.form.id) {
            key = 'careerDirectionUpdate'
            msg = '编辑成功'
          }
          PositionApi[key](params, true)
            .then(data => {
              self.loading = false;
              ElMessage({
                message: msg,
                type: 'success'
              });
              self.dialogFormVisible(true);
            })
            .catch(error => {
              self.loading = false;
            });

        }
      });
    },

    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit('close', {
          type: 'success',
          openDialog: false
        });
      } else {
        this.$emit('close', {
          type: 'error',
          openDialog: false
        });
      }
    }
  }
};
</script>
